<template>
  <div class="app-container">
    <!--表格-->
    <el-table
      ref="multipleTable"
      :data="orders"
      tooltip-effect="dark"
      style="width: 100%">
      <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
      <el-table-column prop="user.userName" label="买家名" align="center" width="100"></el-table-column>
      <el-table-column prop="product.productName" label="商品名称" align="center" width="200"></el-table-column>
      <el-table-column prop="orderProductNum" label="购买数量" align="center" width="100"></el-table-column>
      <el-table-column prop="orderPrice" label="订单价格" align="center" width="150"></el-table-column>
      <el-table-column prop="product.productKind" label="商品类别" align="center" width="150"></el-table-column>
      <el-table-column prop="orderDate" label="下单时间" align="center"  width="150"></el-table-column>
      <el-table-column prop="oState.orderStateName" label="订单状态" align="center" width="150"></el-table-column>
      <!--<el-table-column label="操作" min-width="100" align="center" >-->
        <!--<template slot-scope="scope">-->
           <!--<span v-if="scope.row.orderState===0">-->
             <!--<el-button  size="mini" type="success" @click="confirmOrder(scope.row.orderId)">确认发货</el-button>-->
            <!--<el-button size="mini" type="primary" @click="backMoney(scope.row.orderId)">退款</el-button>-->
          <!--</span>-->
          <!--<span v-else-if="scope.row.orderState===1">-->
              <!--<el-button  size="mini" type="success" @click="confirmReceipt(scope.row.orderId)">确认收货</el-button>-->
              <!--<el-button size="mini" type="primary" @click="refund(scope.row.orderId)">申请退款</el-button>-->
          <!--</span>-->
          <!--<span v-else-if="scope.row.orderState===3">-->
               <!--<el-button  size="mini" type="success" @click="accessRefund(scope.row.orderId)">同意退款</el-button>-->
              <!--<el-button size="mini" type="primary" @click="backRefund(scope.row.orderId)">驳回退款</el-button>-->
            <!--<el-button  size="mini" type="danger" @click="cancelRefund(scope.row.orderId)">取消退款</el-button>-->
          <!--</span>-->
          <!--<span v-else-if="scope.row.orderState===4">-->
            <!--<el-button size="mini" type="warning" @click="cancelOrder(scope.row.orderId)">取消订单</el-button>-->
              <!--<el-button  size="mini" type="danger" @click="pay(scope.row.orderId)">付款</el-button>-->
          <!--</span>-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>
    <br/>
    <!--分页栏-->
    <el-row>
      <el-col :span="20" align="center">
        <el-pagination background layout="prev, pager, next" :current-page="currentPage" :hide-on-single-page="hidePage" :page-size="pageSize" :total="total" @current-change="page"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import request from '@/utils/cbp-request.js'
  import Cookies from 'js-cookie'
  // 编写vue.js代码
  export default {
    data() {
      return {
        currentPage:1,
        pageSize:10,
        total:0,
        hidePage:true,
        orders:[],
      }
    },
    methods: {
      page(pageNum){
        request({
          url:'/order/page/'+pageNum+"/"+this.pageSize+"/",
          method:'get',
        }).then((resp) =>{
          this.orders = resp.data.list;
          this.total = resp.data.total;
          this.currentPage = resp.data.pageNum;
        })
      },
      // 取消订单
      // cancelOrder(orderId){
      //   request({
      //     url:'/order/cancelOrder/'+orderId,
      //     method:'put',
      //   }).then((resp) =>{
      //     if (resp.status === 2000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'success'
      //       })
      //       this.page(this.currentPage);
      //     }
      //     if (resp.status === 4000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'error'
      //       })
      //       this.page(this.currentPage);
      //     }
      //   })
      // },
      // // 确认收货
      // confirmReceipt(orderId){
      //   request({
      //     url:'/order/confirmReceipt/'+orderId,
      //     method:'put',
      //   }).then((resp) =>{
      //     if (resp.status === 2000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'success'
      //       })
      //       this.page(this.currentPage);
      //     }
      //     if (resp.status === 4000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'error'
      //       })
      //       this.page(this.currentPage);
      //     }
      //   })
      // },
      // // 申请退款
      // refund(orderId){
      //   request({
      //     url:'/order/refund/'+orderId,
      //     method:'put',
      //   }).then((resp) =>{
      //     if (resp.status === 2000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'success'
      //       })
      //       this.page(this.currentPage);
      //     }
      //     if (resp.status === 4000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'error'
      //       })
      //       this.page(this.currentPage);
      //     }
      //   })
      // },
      // // 取消退款
      // cancelRefund(orderId){
      //   request({
      //     url:'/order/cancelRefund/'+orderId,
      //     method:'put',
      //   }).then((resp) =>{
      //     if (resp.status === 2000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'success'
      //       })
      //       this.page(this.currentPage);
      //     }
      //     if (resp.status === 4000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'error'
      //       })
      //       this.page(this.currentPage);
      //     }
      //   })
      // },
      // // 退款
      // backMoney(orderId){
      //   request({
      //     url:'/order/backMoney/'+orderId,
      //     method:'put',
      //   }).then((resp) =>{
      //     if (resp.status === 2000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'success'
      //       })
      //       this.page(this.currentPage);
      //     }
      //     if (resp.status === 4000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'error'
      //       })
      //       this.page(this.currentPage);
      //     }
      //   })
      // },
      // // 付款
      // pay(orderId){
      //   request({
      //     url:'/order/pay/'+orderId,
      //     method:'put',
      //   }).then((resp) =>{
      //     if (resp.status === 2000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'success'
      //       })
      //       this.page(this.currentPage);
      //     }
      //     if (resp.status === 4000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'error'
      //       })
      //       this.page(this.currentPage);
      //     }
      //   })
      // },
      // // 确认发货
      // confirmOrder(orderId){
      //   request({
      //     url:'/order/confirmOrder/'+orderId,
      //     method:'put',
      //   }).then((resp) =>{
      //     if (resp.status === 2000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'success'
      //       })
      //       this.page(1);
      //     }
      //     if (resp.status === 4000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'error'
      //       })
      //       this.page(this.currentPage);
      //     }
      //   })
      // },
      // // 同意退款
      // accessRefund(orderId){
      //   request({
      //     url:'/order/accessRefund/'+orderId,
      //     method:'put',
      //   }).then((resp) =>{
      //     if (resp.status === 2000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'success'
      //       })
      //       this.page(1);
      //     }
      //     if (resp.status === 4000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'error'
      //       })
      //       this.page(this.currentPage);
      //     }
      //   })
      // },
      // // 驳回退款
      // backRefund(orderId){
      //   request({
      //     url:'/order/backRefund/'+orderId,
      //     method:'put',
      //   }).then((resp) =>{
      //     if (resp.status === 2000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'success'
      //       })
      //       this.page(1);
      //     }
      //     if (resp.status === 4000) {
      //       this.$message({
      //         message: resp.msg,
      //         type: 'error'
      //       })
      //       this.page(this.currentPage);
      //     }
      //   })
      // },
    },mounted() {
      this.page(1);
    }
  }
</script>

<style scoped>
  .app-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 84px);
  }
</style>
